<template>
  <div class="register">
    <div class="header">
      <button @click="$router.go(-1)">取消</button>
    </div>
    <div class="container">
      <div class="title">用户注册</div>
      <div class="contetnt">
        <!-- 表单 -->
        <form>
          <InputGroup
          :name="'nickname'"
          :type="'text'"
          :value="''"
          :placeholder="'请输入昵称'"
          :label="'昵称'"
          v-model="user.name"
          ></InputGroup>

          <InputGroup
          :name="'email'"
          :type="'text'"
          :value="''"
          :placeholder="'请输入邮箱'"
          :label="'邮箱'"
          v-model="user.email"

          ></InputGroup>
<!-- 这里传值有点问题吧。。。居然没出错 -->
          <InputGroup
          name="password"
          type="password"
          value=""
          placeholder="请输入密码"
          label="密码"
          v-model="user.password"

          ></InputGroup>        

          <InputGroup
          :name="'passwprd2'"
          :type="'password'"
          :value="''"
          :placeholder="'请确认密码'"
          :label="'确认密码'"
          v-model="user.password2"

          ></InputGroup>          
        </form>
        <!-- 表单end -->
        <div class="btn_warp">
        <YBotton
        :disable="isDisabled"
        @click="registerClick"
        >注册</YBotton>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import InputGroup from '../components/inputGroup.vue'
import YBotton from '../components/YBotton.vue'
export default {
   data(){
    return {
      user:{
        email:'',
        name:'',
        password:'',
        password2:''

      }
    }
  },
  computed: {
 isDisabled(){
      if(this.user.email && this.user.password && this.user.name && this.user.password2){
        return false
      }else{
        return true
      }
    }
  },
  methods:{
    registerClick() {
      var reg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (!reg.test(this.user.email)) {
        alert('请输入合法的邮箱地址！');
        return;
      }

      if (this.user.password !== this.user.password2) {
        alert('两次密码不一致!');
        return;
      }


      this.$axios.post('/api/users/register', this.user).then(res => {
        // 注册成功
        alert(res);
        this.$router.push('/login');
      });

    }
  },
  components:{
    InputGroup,
    YBotton
  }
}
</script>
<style lang="css" scoped>
  .register{
    width: 100%;
    height:100%;
    overflow: hidden;
  }
  .header{
    width: 100%;
    height:50px;
    box-sizing: border-box;
    padding:0 10px;
    line-height: 50px;
  }
  .header button{
    border:none;
    outline: none;
    background-color:transparent;
    color:#20af0e;
  }
  .container{
    width: 100%;
    padding:16px;
    box-sizing: border-box;
  }
  .title{
    margin-top:30px;
    font-size: 22px;
    text-align: center;
  }
  .content,
  .btn_warp{
    margin-top:30px;
  }
</style>